import { Card, Col, Form, Input, Modal, Row } from "antd"
import CardListType from "../../../../types/CardListType"
import './index.less'
import { useState } from "react"
function CardList() {

    const cardList: CardListType[] = [
        {
            title: "card0",
            content: "carrrrrdddOne",
            id: 0
        },
        {
            title: "card1",
            content: "carrrrrdddOne",
            id: 1
        },
        {
            title: "card2",
            content: "carrrrrdddOne",
            id: 2
        },
        {
            title: "card3",
            content: "carrrrrdddOne",
            id: 3
        },
    ]
    const [Cardlists, setCarLists] = useState(cardList)
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm();
    const [EditID, setEditID] = useState(-1)
    const addCard = (value: any) => {
        const { title, content } = value
        const newCardItem = {
            title: title,
            content: content,
            id: Cardlists.length
        }
        setCarLists([...Cardlists, newCardItem])
    }
    const editCard = () => {
        const data = form.getFieldsValue()
        let temp = Cardlists.find(item => item.id === EditID)
        const { title, content } = data
        if (temp) {
            temp.content = content
            temp.title = title
        }
    }
    const openModal = (value?: any) => {
        setIsModalOpen(true)
        if (value) {
            form.setFieldsValue(value)
            setEditID(value.id)
        }

    }
    const handleOk = () => {
        if (EditID === -1) addCard(form.getFieldsValue())
        else editCard()
        form.resetFields()
        setIsModalOpen(false);
        setEditID(-1)

    };
    const handleCancel = () => {
        form.resetFields()
        setIsModalOpen(false);
        setEditID(-1)

    };

    return (
        <>
            <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form className="form" form={form}>
                    <Form.Item
                        label="Title"
                        name="title"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Content"
                        name="content"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
            <Row gutter={24}>
                <Col className="col" span={6} >
                    <Card hoverable bordered={true} onClick={() => openModal()}>
                        添加
                    </Card>
                </Col>
                {Cardlists.map(item => {
                    return (<Col className="col" span={6} key={item.id} >
                        <Card hoverable bordered={true} onClick={() => openModal(item)}>
                            <div className="card">
                                <div className="imag">
                                    图片
                                </div>
                                <div className="cardContent">
                                    <div className="title">{item.title}</div>
                                    <div className="contents">{item.content}</div>
                                </div>
                            </div>
                        </Card>
                    </Col>)
                })}
            </Row >
        </>
    )
}

export default CardList